<template>
  <div class="more-container">
    <configinfo @closeinfo='closeinfo' :isshow='tipinfo'></configinfo>
      <el-row style="margin-top:10px;margin-bottom:10px;">
          <el-col :span="4">
            <el-input
                v-model="topsearch.keyword"
                placeholder="请输入规则名称"
                clearable
                :style="{ width: '92%' }"
              ></el-input>
          </el-col>
          <el-col :span="4">
            <el-select v-model="topsearch.type" placeholder="请选择规则类型" clearable :style="{width: '92%'}">
              <el-option v-for="(item, index) in typeOptions" :key="index" :label="item.label" :value="item.value"
                :disabled="item.disabled" ></el-option>
          </el-select>
          </el-col>
        </el-row>
        <commonline :newText='"规则"' :isshowAdd="checkPermission(['jointRuleAdd'])" @addList='additem' @searchlist='searchlist' @resetform='resetform'></commonline>
        <addruledialog :dialogtitle='dialogtitle' :formType='formType' :isshowDailog='isshowrule' @confirm='confirmdialog' @close='closedialog'></addruledialog>
        <configtable   @changepage='changepage' @changepageTotal='changepageTotal' :tabData='tabData' v-if="isData" @delitem='delitem' @editform='editform'></configtable>
  </div>
</template>


<script>
//提示信息
import configinfo from './component/configinfo'
//搜索行
import commonline from '@/components/commonline/commonline'
//规则配置
import configtable from './component/configtable'
//新增规则弹窗
import addruledialog from './component/addruledialog'
//api
import {getruleList,delitem,getbaseinfo} from '@/api/rule'
 //按钮权限验证
  import checkPermission from "@/utils/permission";
export default {
  data() {
    return {
      //是否显示提示信息
      tipinfo:true,
       //数据是否加载成功
      isData:false,
      //平台自建信息
      platformData:{},
      // 弹窗标题
      dialogtitle:'新增规则',
      //顶部搜索
      topsearch:{
        //搜索关键字
         keyword:'',
         type:''
      },
      //是否显示新增规则弹窗
      isshowrule:false,
      //表格数据
      tabData:{},
      //数据是否加载成功
      isData:false,
      //新增还是编辑 新增 0 编辑1
      formType:0,
      //页数
      page:1,
      //多少页
      total:10,
      //总共有多少条数据
      pageTotal:'',
      //选项数据
      typeOptions: [{
        "label": "费用占比",
        "value": 1
      }, {
        "label": "学员定额",
        "value": 2
      }]
    }
  },
  methods:{
    checkPermission,
    //关闭提示
    closeinfo(){
      this.tipinfo = false
    },
    //编辑弹窗
    editform(val){
      this.dialogtitle = '编辑规则'
      this.formType = val.type;
      this.$bus.emit("editform",val)
      //打开弹窗
      this.isshowrule =true
    },
    //删除
    delitem(id){
      let params = {
        id
      }
       //询问客户是否删除
       this.$confirm('您确认要删除吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          let data = await delitem(params)
          if(data.code=='0000'){
              this.$message({
              type: 'success',
              message: '删除成功!'
            });

            //此时已经实现删除操作，所以总页数的值需要减1，Math.ceil是向上取整，保证始终大于等于1
            const totalPage = Math.ceil((this.pageTotal - 1) / 10)
            //记录当前页码
            //记住删除最后一条数据时当前码是最后一页
            const pagenum = this.page > totalPage ? totalPage : this.page
            //实现跳转
            this.page = pagenum < 1 ? 1 : pagenum
          }
            //刷新列表
          this.getRuleListData()

        }).catch(() => {

        });
    },
    //翻页
    changepage(val){
      this.page = val
      this.getRuleListData()
    },
    changepageTotal(val){
      this.total = val
      this.getRuleListData()
    },
    //获取列表信息
     async getRuleListData(){
       let params = {
         page:this.page,
         rows:this.total
       }
       if(this.topsearch.keyword){
         params.keyword = this.topsearch.keyword
       }
       if(this.topsearch.type){
         params.type = this.topsearch.type
       }
       let data = await getruleList(params)
       if(data.code=='0000'){
          this.isData = true
          this.tabData = data.data
          this.pageTotal = data.data.page.total
       }

    },
    //确认弹窗
    confirmdialog(){
      //刷新列表
      this.getRuleListData()
      this.isshowrule  = false
    },
    //取消弹窗
    closedialog(){
      this.isshowrule  = false
    },
    //新增规则弹窗
    additem(){
      this.isshowrule = true
      this.formType = 0
    },
    //搜索
    searchlist(){
      this.$message({
            type: 'success',
            message: '查询成功!'
          });
      //刷新列表
      this.getRuleListData()
    },
    //重置
    resetform(){
       this.topsearch = {
        keyword:'',
        type:''
      }
      this.getRuleListData()
      this.$message({
        type: 'success',
        message: '已重置!',
      })
    }
  },
  mounted(){
    //获取列表信息
    this.getRuleListData()
  },
  components:{
      configtable,
      commonline,
      addruledialog,
      configinfo
  }
}
</script>

<style scoped lang='scss'>
::v-deep {
  .el-tabs__nav-wrap::after {
    height: 1px;
  }
  .el-tabs__item{
      font-size: 16px;
  }
  .el-tabs__item.is-active{
      font-weight: bold;
  }
}
.tabcontent{
    margin-top: 10px;
}
.searchtop{
  margin-top: 10px;
}
</style>
